<template>
  <div class="components-attr-edit">
    <el-scrollbar class="components-attr-edit">
      <div class="attr-edit-inner" v-if="currElementUUID">
        <div class="animate-edit-btn-wrapper">
          <el-dropdown>
            <el-button type="primary" size="small">
              添加事件
              <i class="el-icon-arrow-down el-icon--right"></i>
            </el-button>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item v-for="(item, index) in eventTypeList" :key="index">
                <div @click="updateElementEvent({'type': item.value})">{{item.label}}</div>
              </el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
          <p class="gray inline-block fontsize-12 marginL10">事件在编辑模式下无效果</p>
        </div>
        <div class="el-animate-list-wrapper" v-show="currElement.events.length">
          <el-collapse accordion>
            <el-collapse-item v-for="(item, index) in currElement.events" :key="index">
              <template slot="title">
                <span class="el-animate-title-name">事件 {{index + 1}}</span>
                <div class="el-animate-title-type-wrapper">
                  <span class="el-animate-title-type">{{item.type | getLabelText(eventTypeList)}}</span>
                </div>
                <span class="el-animate-title-btn" @click="deleteElementEvent(index)">
                  <i class="el-icon-delete"></i>
                </span>
              </template>
              <div class="el-animate-item">
                <div class="attr-item-edit-wrapper">
                  <p class="attr-item-title">链接/接口url：</p>
                  <div class="col-1 attr-item-edit-input">
                    <el-input type="textarea" :rows="3" placeholder="请输入url" v-model="_eventLink" />
                  </div>
                </div>
              </div>
            </el-collapse-item>
          </el-collapse>
        </div>
      </div>
      <div v-else>
        <p class="gray paddingT30 text-center">请在画板上选择需要编辑得元素</p>
      </div>
    </el-scrollbar>
  </div>
</template>

<script>
import { mapState, mapGetters, mapMutations } from 'vuex'
export default {
  name: 'setting-event',
  data () {
    return {
      eventTypeList: [{
        label: '链接跳转',
        value: 'link'
      }]
    }
  },
  computed: {
    ...mapState('programs', [
      'pageData',
      'currSceneUUID',
      'currElementUUID'
    ]),
    ...mapGetters('programs', [
      'currSceneIndex',
      'currElementIndex',
      'currElement',
      'currScene'
    ]),
    _eventLink: {
      get() {
        return this.currElement.events[0].url
      },
      set(val) {
        this.updateElementEvent({
          url: val
        })
      }
    }
  },
  filters: {
    /**
    * 根据value获取label
    * @param value
    * @param list 对象列表
    */
    getLabelText(value, list, label = 'label') {
      let data = list.find(v => v.value === value)
      if (data) {
        return data[label]
      } else {
        return ''
      }
    }
  },
  methods: {
    ...mapMutations('programs', ['updateElementEvent', 'deleteElementEvent'])
  }
}
</script>

<style lang="scss" scoped>
@import '../../../assets/scss/_variables';
.components-attr-edit {
  height: 100%;
}
.components-attr-animate-edit {
  position: relative;
}
.attr-title {
  font-weight: bold;
}
.el-animate-list-wrapper {
  .el-animate-title-name {
    display: inline-block;
    vertical-align: middle;
    font-size: 14px;
    font-weight: bold;
    width: 55px;
  }
  .el-animate-title-type-wrapper {
    display: inline-block;
    width: 190px;
  }
  .el-animate-title-type {
    display: inline-block;
    vertical-align: middle;
    max-width: 140px;
    height: 24px;
    color: #333;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    background: #fafafa;
    border-radius: 60px;
    padding: 4px 20px;
    border: none;
    cursor: pointer;
    margin: 0 20px 0 10px;
    line-height: 14px;
  }
  .el-animate-title-btn {
    display: inline-block;
    vertical-align: middle;
    text-align: center;
    line-height: 24px;
    font-size: 14px;
    color: #666;
    width: 24px;
    height: 24px;
    cursor: pointer;
    border-radius: 4px;
    background: rgba(37, 165, 137, 0.08);
    margin-left: 6px;
    &:hover {
      color: white;
      background: $primary;
    }
  }
}
</style>
